import 'dart:io';

import 'package:flutter/material.dart';

import 'heading_dialog.dart';
import 'insert_image_dialog.dart';
import 'javascript_executor_base.dart';
import 'tab_button.dart';

class EditorToolBar extends StatefulWidget {
  const EditorToolBar({
    Key? key,
    this.getImageUrl,
    this.javascriptExecutor,
    this.enableVideo,
  }) : super(key: key);
  final Function(File image)? getImageUrl;
  final JavascriptExecutorBase? javascriptExecutor;
  final bool? enableVideo;

  @override
  _EditorToolBarState createState() => _EditorToolBarState();
}

class _EditorToolBarState extends State<EditorToolBar> {
  List selected = [
    false,
    false,
    false,
    false,
    false,
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.0,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TabButton(
                tooltip: 'Insert Image',
                icon: Icons.image,
                onTap: () async {
                  var link = await showDialog(
                    context: context,
                    builder: (_) {
                      return const InsertImageDialog();
                    },
                  );
                  if (link != null) {
                    if (widget.getImageUrl != null && link[2]) {
                      link[0] = await widget.getImageUrl!(File(link[0]));
                    }
                    await widget.javascriptExecutor!.insertImage(
                      link[0],
                      alt: link[1],
                    );
                  }
                },
              ),
              TabButton(
                tooltip: 'Font format',
                icon: Icons.text_format,
                onTap: () async {
                  var command = await showDialog(
                    // isScrollControlled: true,
                    context: context,
                    builder: (_) {
                      return HeadingDialog();
                    },
                  );
                  if (command != null) {
                    if (command == 'p') {
                      await widget.javascriptExecutor!
                          .setFormattingToParagraph();
                    } else if (command == 'pre') {
                      await widget.javascriptExecutor!.setPreformat();
                    } else if (command == 'blockquote') {
                      await widget.javascriptExecutor!.setBlockQuote();
                    } else {
                      await widget.javascriptExecutor!
                          .setHeading(int.tryParse(command)!);
                    }
                  }
                },
              ),
              TabButton(
                tooltip: 'Bold',
                icon: Icons.format_bold,
                onTap: () async {
                  setState(() {
                    selected[0] = !selected[0];
                  });
                  await widget.javascriptExecutor!.setBold();
                },
                selected: selected[0],
              ),
              TabButton(
                tooltip: 'Italic',
                icon: Icons.format_italic,
                onTap: () async {
                  setState(() {
                    selected[1] = !selected[1];
                  });
                  await widget.javascriptExecutor!.setItalic();
                },
                selected: selected[1],
              ),
              TabButton(
                tooltip: 'Underline',
                icon: Icons.format_underline,
                onTap: () async {
                  setState(() {
                    selected[2] = !selected[2];
                  });
                  await widget.javascriptExecutor!.setUnderline();
                },
                selected: selected[2],
              ),

              // TODO: Show font button on iOS
              // Visibility(
              //   visible: (!kIsWeb && Platform.isAndroid),
              //   child: TabButton(
              //     tooltip: 'Font face',
              //     icon: Icons.font_download,
              //     onTap: () async {
              //       var command = await showDialog(
              //         // isScrollControlled: true,
              //         context: context,
              //         builder: (_) {
              //           return FontsDialog();
              //         },
              //       );
              //       if (command != null)
              //         await widget.javascriptExecutor!.setFontName(command);
              //     },
              //   ),
              // ),

              // TabButton(
              //   tooltip: 'Text Color',
              //   icon: Icons.format_color_text,
              //   onTap: () async {
              //     var color = await showDialog(
              //       context: context,
              //       builder: (BuildContext context) {
              //         return ColorPickerDialog(color: Colors.blue);
              //       },
              //     );
              //     if (color != null)
              //       await widget.javascriptExecutor!.setTextColor(color);
              //   },
              // ),
              TabButton(
                tooltip: 'Bullet List',
                icon: Icons.format_list_bulleted,
                onTap: () async {
                  setState(() {
                    selected[3] = !selected[3];
                    if (selected[4] == true) {
                      selected[4] = false;
                    }
                  });
                  await widget.javascriptExecutor!.insertBulletList();
                },
                selected: selected[3],
              ),
              TabButton(
                tooltip: 'Numbered List',
                icon: Icons.format_list_numbered,
                onTap: () async {
                  setState(() {
                    selected[4] = !selected[4];
                    if (selected[3] == true) {
                      selected[3] = false;
                    }
                  });
                  await widget.javascriptExecutor!.insertNumberedList();
                },
                selected: selected[4],
              ),

              /// TODO: Implement Search feature
              // TabButton(
              //   tooltip: 'Search',
              //   icon: Icons.search,
              //   onTap: () async {
              //     // await javascriptExecutor.insertNumberedList();
              //   },
              // ),
            ],
          ),
        ],
      ),
    );
  }
}
